<template>
  <div class="record-wrapper">
    <keep-alive>
      <el-dialog title="记录" :visible.sync="recordRialogVisible" width="30%" :before-close="hide">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="检索日期:">
            <el-date-picker
              v-model="form.time"
              type="datetimerange"
              :default-time="['12:00:00']"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              :picker-options="pickerOptions"
              @change="handleChange"
            />
          </el-form-item>
        </el-form>
        <el-table :data="list" style="width: 100%">
          <el-table-column prop="created_at" label="时间" width="" />
          <el-table-column prop="spu_type" label="类型" width="" />
          <el-table-column prop="number" label="数量" width="" />
          <el-table-column prop="admin" label="操作人" width="" />
          <!-- <el-table-column prop="assistant" label="业务员" width="" /> -->
          <el-table-column prop="spu_message" label="备注" width="" />
        </el-table>
        <Pagination class="pagination" :total="total" :page-size="pageSize" :cur-page="currentPage" @nextPage="handleNextPage" />
      </el-dialog>
    </keep-alive>
  </div>
</template>
<script>
import { recordStockList } from '@/api/stock'
import Pagination from '@/common/pagination'
const ERR_OK = 200
export default {
  components: {
    Pagination
  },
  props: {
    id: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      recordRialogVisible: false,
      form: {
        time: ''
      },
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      tableData: [
        {
          time: '2020/03/22',
          type: '出库',
          count: 51155,
          people: '操作人',
          assistant: '业务员',
          note: '备注'
        },
        {
          time: '2020/03/22',
          type: '出库',
          count: 51155,
          people: '操作人',
          assistant: '业务员',
          note: '备注'
        }
      ],
      list: [],
      total: 0,
      pageSize: 0,
      page: 1,
      currentPage: 0
    }
  },
  watch: {
    id(newVal) {
      this.list = []
      this.currentPage = 1
      this._recordStockList({ id: this.id, page: this.page })
    }
  },
  methods: {
    handleChange(time) {
      console.log(time)
      // if (!time) return
      this.page = 1
      if (time) {
        this._recordStockList({ page: this.page, id: this.id, start_time: time[0], end_time: time[1] })
      } else {
        this._recordStockList({ page: this.page, id: this.id })
      }
    },
    show() {
      this.recordRialogVisible = true
    },
    hide() {
      this.recordRialogVisible = false
    },
    handleNextPage(page) {
      this.page = page
      this._recordStockList({ id: this.id, page: this.page })
    },
    _recordStockList({ page, id, start_time, end_time }) {
      recordStockList({ page, id, start_time, end_time })
        .then(res => {
          if (res.code === ERR_OK) {
            this.pageSize = res.data.per_page
            this.total = res.data.total
            this.currentPage = res.data.current_page
            res.data.data.forEach((item, index) => {
              if (item.spu_type === 1) {
                item.spu_type = '入库'
              } else if (item.spu_type === 2) {
                item.spu_type = '出库'
              }
            })
            this.list = res.data.data
            console.log(res)
          }
        })
        .catch(err => {
          console.log(err)
          this._warning(err)
        })
    },
    _success(res) {
      this.$message({
        message: res.message,
        type: 'success'
      })
    },
    _warning(res) {
      this.$message({
        message: res.message,
        type: 'warning'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/el-pagination.scss';
.el-dialog__wrapper /deep/ .el-dialog{
  min-width: 1000px;
  min-height: 400px;
}
</style>
